
<style>
    .layui-form-label{
        width: 100px !important;
    }
    .layui-laypage a, .layui-laypage span{
        background-color: #f2f2f2;
    }
</style>

<script type="text/html" id="caozuo">

        {{#if(d.terminal_key_status!='未使用'){ }}

        {{# }else{}}
            <button class="btn layui-btn" lay-event="groupStatusEvent">使用</button>
        {{# }}}

</script>
<div style="margin-top: 1%;">
    <form class="layui-form" action="">

        <div class="layui-form-item ">
            <div class="layui-inline ">
                <label class="layui-form-label">密钥:</label>
                <div class="layui-input-inline">
                    <input type="tel" id="bh" name="bh" autocomplete="off" class="layui-input" value="">
                </div>
            </div>

            <!--<div class="layui-form-item layui-col-xs12">-->
            <div class="layui-inline">
                <label class="layui-form-label">Mac地:</label>
                <div class="layui-input-inline">
                    <input type="text" id="Name" name="Name" autocomplete="off" class="layui-input" value="">
                </div>
            </div>
            <!--</div>-->

            <!--<div class="layui-form-item layui-col-xs12">-->
            <div class="layui-inline">
                <label class="layui-form-label">使用状态:</label>
                <div class="layui-input-inline">
                    <select id="type1val" >
                        <option value="">全部</option>
                        <option value="使用中">使用中</option>
                        <option value="未使用">未使用</option>
                        <option value="已过期">已过期</option>
                    </select>
                </div>
            </div>

        </div>


        <div class="layui-form-item ">
            <div class="layui-inline ">
                <label class="layui-form-label">上线时间:</label>
                    <div class="layui-input-inline">
                    <input type="text" id="startTimevalkey" lay-verify="date" autocomplete="off" class="layui-input">
                </div>
            </div>

            <!--<div class="layui-form-item layui-col-xs12">-->
            <div class="layui-inline">
                <label class="layui-form-label">下线时间:</label>
                <div class="layui-input-inline">
                    <input type="text" id="endTimevalkey" lay-verify="date"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <!--</div>-->


            <div class="layui-inline">
                <button type="button"  class="layui-btn" id="btnSearch1">搜索</button>
            </div>
        </div>

    </form>
</div>

<div class="layui-form">
    <div style="padding-left: 50px;">
        <caption style="margin-left: 40px;"><span >
                <button type="button" class="btn btn-primary layui-btn"  onclick="method5()">
                    <span class="glyphicon glyphicon-folder-open">导出Excel</span>
                </button>
            </span>
        </caption>
    </div>
    <table class="layui-table" id="terminal_key_data" lay-filter="terminal_key_data">

    </table>
    <div id="demo7" style="text-align: center"></div>
</div>


<script>

    var local_store = layui.data("local_store");
    var local = local_store.token;
    $.ajax({
        type:"get",
        url:"/admin/station/query/stationLoginQuanxXian?stationId="+json.id,
        dataType: "json",
        contentType:"application/json;charset=utf-8",
        beforeSend: function(request) {
            request.setRequestHeader("token", local);
        },
        success:function (res) {
            if(res.code==500){
                alert("权限不足")
                location="../../admin/main.html";
                return
            }}})
    function GetRequest() {
        var url = decodeURI(location.search); //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for(var i = 0; i < strs.length; i ++) {
                theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }

    var json=GetRequest();

    layui.use(['form', 'layedit', 'laydate'], function(){

        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,table=layui.table;
        form.render();

        table.render({
            elem: '#terminal_key_data'
            , id: "t"
            , method: 'get'
            ,url:'/admin/terminal-key/query/terminalKey?key_site='+json.id
            ,cols: [[
                {field:'terminal_key_id', title: '密钥编号', width: "10%",
                    align: "center"}
                ,{field:'terminal_key_room', title: '房间号',width: "10%",
                    align: "center"}
                    ,{field:'terminal_key_room_type', title: '房间类型',width: "10%",
                    align: "center"}
                ,{field:'terminal_key_value', width: "10%",
                    align: "center", title: '密钥'}
                ,{field:'terminal_key_status',width: "10%",
                    align: "center",  title: '状态'}
                ,{field:'terminal_key_begin_time', title: '开始时间',width: "20%",
                    align: "center",
                    templet: "<div> {{  Format(d.terminal_key_begin_time,'yyyy-MM-dd hh:mm:ss')}}</div>"}
                ,{field:'terminal_key_end_time', width: "20%",
                    align: "center", title: '结束时间',
                    templet: "<div> {{  Format(d.terminal_key_end_time,'yyyy-MM-dd hh:mm:ss')}}</div>"}
                ,{
                    title:'操作',
                    align:'center',
                    toolbar:'#caozuo',
                    fixed: 'right'
                }
            ]],
            page: true,
            limit:40
        });

        $("#btnSearch1").click(function(){
            table.reload("t",{
                where:{
                    terminal_key_begin_time:$("#startTimevalkey").val(),
                    terminal_key_end_time:$("#endTimevalkey").val(),
                    terminal_key_status:$("#type1val").val()
                },
                page:{
                    curr:1
                }
            });
        });

        table.on("tool(terminal_key_data)", function (obj) {
            var getdata = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）


            switch (layEvent) {

                case "groupStatusEvent":

                    layui.data("s",{key:"terminal",value:json.id});
                    layui.data("s2",{key:"terminal2",value:getdata});
                    layer.open({
                        title:"历史记录",
                        type:2,
                        content:'/admin/station_config/views/layui/terminal_key_use.html',
                        area:['800px','500px']
                    });
                    break;
            }
        });


    });

    //导出表格
    var idTmr;
    function  getExplorer() {
        var explorer = window.navigator.userAgent ;
        //ie
        if (explorer.indexOf("MSIE") >= 0) {
            return 'ie';
        }
        //firefox
        else if (explorer.indexOf("Firefox") >= 0) {
            return 'Firefox';
        }
        //Chrome
        else if(explorer.indexOf("Chrome") >= 0){
            return 'Chrome';
        }
        //Opera
        else if(explorer.indexOf("Opera") >= 0){
            return 'Opera';
        }
        //Safari
        else if(explorer.indexOf("Safari") >= 0){
            return 'Safari';
        }
    }

    function method5() {

        location="/admin/terminal-key/query/terminalKeyExcel?key_site="+json.id;
    }

    function Cleanup() {
        window.clearInterval(idTmr);
        CollectGarbage();
    }
    var tableToExcel = (function() {
        var uri = 'data:application/vnd.ms-excel;base64,',
            template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>',
            base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },
            format = function(s, c) {
                return s.replace(/{(\w+)}/g,
                    function(m, p) { return c[p]; }) }
        return function(table, name) {
            if (!table.nodeType) table = document.getElementById(table)
            var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
            window.location.href = uri + base64(format(template, ctx))
        }
    });

</script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#startTimevalkey'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#endTimevalkey'
            ,type: 'datetime'
        });
    });
</script>

<!--table日期转换格式-->
<script>
    function Format(datetime,fmt) {
        if (parseInt(datetime)==datetime) {
            if (datetime.length==10) {
                datetime=parseInt(datetime)*1000;
            } else if(datetime.length==13) {
                datetime=parseInt(datetime);
            }
        }
        datetime=new Date(datetime);
        var o = {
            "M+" : datetime.getMonth()+1,                 //月份
            "d+" : datetime.getDate(),                    //日
            "h+" : datetime.getHours(),                   //小时
            "m+" : datetime.getMinutes(),                 //分
            "s+" : datetime.getSeconds(),                 //秒
            "q+" : Math.floor((datetime.getMonth()+3)/3), //季度
            "S"  : datetime.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt))
            fmt=fmt.replace(RegExp.$1, (datetime.getFullYear()+"").substr(4 - RegExp.$1.length));
        for(var k in o)
            if(new RegExp("("+ k +")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        return fmt;
    }
</script>